<template>
  <div class="min-h-screen bg-gradient-to-br from-gray-50 via-blue-50 to-indigo-50">
    <!-- 背景装饰 -->
    <div class="fixed inset-0 overflow-hidden pointer-events-none">
      <div class="absolute -top-40 -right-40 w-80 h-80 bg-blue-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob"></div>
      <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-purple-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob animation-delay-2000"></div>
      <div class="absolute top-40 left-40 w-80 h-80 bg-pink-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob animation-delay-4000"></div>
    </div>

    <!-- 主要内容区域 -->
    <div class="container mx-auto px-8 py-10 pt-32 relative z-10">
      <!-- 页面标题 -->
      <div class="text-center mb-16">
        <h1 class="text-5xl font-bold mb-6 text-gray-900">讲师招募</h1>
        <p class="text-xl text-gray-600 max-w-4xl mx-auto">
          加入我们的专业讲师团队！我们正在寻找有才华、有激情的教育工作者，一起为学习者创造价值。
        </p>
      </div>

      <!-- 为什么选择我们 -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
        <div class="bg-white rounded-3xl shadow-xl border border-gray-200 p-8 text-center">
          <div class="w-20 h-20 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center mx-auto mb-6">
                            <el-icon class="text-white text-3xl"><Star /></el-icon>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 mb-4">专业发展</h3>
          <p class="text-gray-600 leading-relaxed">
            提供持续的专业培训和发展机会，帮助您在教育领域不断成长和进步。
          </p>
        </div>
        
        <div class="bg-white rounded-3xl shadow-xl border border-gray-200 p-8 text-center">
          <div class="w-20 h-20 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center mx-auto mb-6">
                            <el-icon class="text-white text-3xl"><TrendCharts /></el-icon>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 mb-4">丰厚回报</h3>
          <p class="text-gray-600 leading-relaxed">
            具有竞争力的薪资待遇，绩效奖金制度，让您的付出得到应有的回报。
          </p>
        </div>
        
        <div class="bg-white rounded-3xl shadow-xl border border-gray-200 p-8 text-center">
          <div class="w-20 h-20 bg-gradient-to-br from-purple-500 to-pink-600 rounded-2xl flex items-center justify-center mx-auto mb-6">
                            <el-icon class="text-white text-3xl"><User /></el-icon>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 mb-4">广阔平台</h3>
          <p class="text-gray-600 leading-relaxed">
            覆盖全国的学习者群体，让您的知识和经验影响更多人，实现更大的价值。
          </p>
        </div>
      </div>

      <!-- 招募岗位 -->
      <div class="bg-white rounded-3xl shadow-xl border border-gray-200 p-8 mb-16">
        <h3 class="text-3xl font-bold text-gray-900 mb-8 text-center">招募岗位</h3>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <div class="border-2 border-blue-200 rounded-2xl p-6 bg-blue-50">
            <div class="flex items-center gap-4 mb-4">
              <div class="w-16 h-16 bg-blue-500 rounded-2xl flex items-center justify-center">
                <el-icon class="text-white text-2xl"><Monitor /></el-icon>
              </div>
              <div>
                <h4 class="text-xl font-semibold text-gray-900">技术讲师</h4>
                <p class="text-blue-600 font-medium">全职/兼职</p>
              </div>
            </div>
            <div class="space-y-3 mb-4">
              <h5 class="font-medium text-gray-800">岗位要求：</h5>
              <ul class="space-y-2 text-gray-600 text-sm">
                <li>• 3年以上相关技术工作经验</li>
                <li>• 熟悉主流编程语言和框架</li>
                <li>• 具备良好的表达和沟通能力</li>
                <li>• 有教学经验者优先</li>
              </ul>
            </div>
            <div class="space-y-3">
              <h5 class="font-medium text-gray-800">工作内容：</h5>
              <ul class="space-y-2 text-gray-600 text-sm">
                <li>• 设计并开发技术课程</li>
                <li>• 进行线上直播授课</li>
                <li>• 解答学员技术问题</li>
                <li>• 参与课程内容优化</li>
              </ul>
            </div>
          </div>
          
          <div class="border-2 border-green-200 rounded-2xl p-6 bg-green-50">
            <div class="flex items-center gap-4 mb-4">
              <div class="w-16 h-16 bg-green-500 rounded-2xl flex items-center justify-center">
                <el-icon class="text-white text-2xl"><User /></el-icon>
              </div>
              <div>
                <h4 class="text-xl font-semibold text-gray-900">管理讲师</h4>
                <p class="text-green-600 font-medium">全职/兼职</p>
              </div>
            </div>
            <div class="space-y-3 mb-4">
              <h5 class="font-medium text-gray-800">岗位要求：</h5>
              <ul class="space-y-2 text-gray-600 text-sm">
                <li>• 5年以上管理岗位经验</li>
                <li>• 具备丰富的实战管理经验</li>
                <li>• 善于总结和分享管理心得</li>
                <li>• 有培训或咨询经验者优先</li>
              </ul>
            </div>
            <div class="space-y-3">
              <h5 class="font-medium text-gray-800">工作内容：</h5>
              <ul class="space-y-2 text-gray-600 text-sm">
                <li>• 开发管理类课程</li>
                <li>• 进行案例分析和讲解</li>
                <li>• 指导学员实践应用</li>
                <li>• 参与课程体系设计</li>
              </ul>
            </div>
          </div>
          
          <div class="border-2 border-purple-200 rounded-2xl p-6 bg-purple-50">
            <div class="flex items-center gap-4 mb-4">
              <div class="w-16 h-16 bg-purple-500 rounded-2xl flex items-center justify-center">
                <el-icon class="text-white text-2xl"><TrendCharts /></el-icon>
              </div>
              <div>
                <h4 class="text-xl font-semibold text-gray-900">业务讲师</h4>
                <p class="text-purple-600 font-medium">全职/兼职</p>
              </div>
            </div>
            <div class="space-y-3 mb-4">
              <h5 class="font-medium text-gray-800">岗位要求：</h5>
              <ul class="space-y-2 text-gray-600 text-sm">
                <li>• 5年以上相关业务经验</li>
                <li>• 深入了解行业发展趋势</li>
                <li>• 具备优秀的分析能力</li>
                <li>• 有培训或演讲经验者优先</li>
              </ul>
            </div>
            <div class="space-y-3">
              <h5 class="font-medium text-gray-800">工作内容：</h5>
              <ul class="space-y-2 text-gray-600 text-sm">
                <li>• 开发业务技能课程</li>
                <li>• 分享行业经验和见解</li>
                <li>• 指导学员业务实践</li>
                <li>• 参与行业研究分析</li>
              </ul>
            </div>
          </div>
          
          <div class="border-2 border-orange-200 rounded-2xl p-6 bg-orange-50">
            <div class="flex items-center gap-4 mb-4">
              <div class="w-16 h-16 bg-orange-500 rounded-2xl flex items-center justify-center">
                <el-icon class="text-white text-2xl"><Star /></el-icon>
              </div>
              <div>
                <h4 class="text-xl font-semibold text-gray-900">创新讲师</h4>
                <p class="text-orange-600 font-medium">全职/兼职</p>
              </div>
            </div>
            <div class="space-y-3 mb-4">
              <h5 class="font-medium text-gray-800">岗位要求：</h5>
              <ul class="space-y-2 text-gray-600 text-sm">
                <li>• 具备创新思维和创造力</li>
                <li>• 有创新项目或产品经验</li>
                <li>• 善于激发他人创新潜能</li>
                <li>• 有设计思维或创新方法经验</li>
              </ul>
            </div>
            <div class="space-y-3">
              <h5 class="font-medium text-gray-800">工作内容：</h5>
              <ul class="space-y-2 text-gray-600 text-sm">
                <li>• 开发创新思维课程</li>
                <li>• 引导创新工作坊</li>
                <li>• 指导创新项目实践</li>
                <li>• 参与创新方法研究</li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <!-- 申请流程 -->
      <div class="bg-white rounded-3xl shadow-xl border border-gray-200 p-8 mb-16">
        <h3 class="text-3xl font-bold text-gray-900 mb-8 text-center">申请流程</h3>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
          <div class="text-center">
            <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <el-icon class="text-blue-600 text-2xl"><Document /></el-icon>
            </div>
            <h4 class="text-lg font-semibold text-gray-900 mb-2">提交申请</h4>
            <p class="text-gray-600 text-sm">填写申请表并上传简历</p>
          </div>
          
          <div class="text-center">
            <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <el-icon class="text-green-600 text-2xl"><ChatDotRound /></el-icon>
            </div>
            <h4 class="text-lg font-semibold text-gray-900 mb-2">初步沟通</h4>
            <p class="text-gray-600 text-sm">HR团队初步沟通了解</p>
          </div>
          
          <div class="text-center">
            <div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <el-icon class="text-purple-600 text-2xl"><VideoPlay /></el-icon>
            </div>
            <h4 class="text-lg font-semibold text-gray-900 mb-2">试讲考核</h4>
            <p class="text-gray-600 text-sm">进行试讲和技能考核</p>
          </div>
          
          <div class="text-center">
            <div class="w-20 h-20 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
                              <el-icon class="text-orange-600 text-2xl"><Document /></el-icon>
            </div>
            <h4 class="text-lg font-semibold text-gray-900 mb-2">正式录用</h4>
            <p class="text-gray-600 text-sm">通过考核后正式录用</p>
          </div>
        </div>
      </div>

      <!-- 申请表单 -->
      <div class="bg-white rounded-3xl shadow-xl border border-gray-200 p-8 mb-16">
        <h3 class="text-3xl font-bold text-gray-900 mb-8 text-center">申请表单</h3>
        <form @submit.prevent="submitApplication" class="max-w-4xl mx-auto space-y-6">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label class="block text-lg font-semibold text-gray-900 mb-3">姓名 *</label>
              <input 
                v-model="applicationForm.name"
                type="text" 
                placeholder="请输入您的姓名"
                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
                required
              >
            </div>
            <div>
              <label class="block text-lg font-semibold text-gray-900 mb-3">手机号 *</label>
              <input 
                v-model="applicationForm.phone"
                type="tel" 
                placeholder="请输入您的手机号"
                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
                required
              >
            </div>
          </div>
          
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label class="block text-lg font-semibold text-gray-900 mb-3">邮箱 *</label>
              <input 
                v-model="applicationForm.email"
                type="email" 
                placeholder="请输入您的邮箱"
                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
                required
              >
            </div>
            <div>
              <label class="block text-lg font-semibold text-gray-900 mb-3">应聘岗位 *</label>
              <select 
                v-model="applicationForm.position"
                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
                required
              >
                <option value="">请选择应聘岗位</option>
                <option value="tech">技术讲师</option>
                <option value="management">管理讲师</option>
                <option value="business">业务讲师</option>
                <option value="innovation">创新讲师</option>
              </select>
            </div>
          </div>
          
          <div>
            <label class="block text-lg font-semibold text-gray-900 mb-3">工作经历 *</label>
            <textarea 
              v-model="applicationForm.experience"
              rows="4"
              placeholder="请详细描述您的工作经历，包括公司名称、职位、工作内容、项目经验等"
              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none resize-none"
              required
            ></textarea>
          </div>
          
          <div>
            <label class="block text-lg font-semibold text-gray-900 mb-3">教学经验</label>
            <textarea 
              v-model="applicationForm.teaching"
              rows="3"
              placeholder="请描述您的教学或培训经验（如有）"
              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none resize-none"
            ></textarea>
          </div>
          
          <div>
            <label class="block text-lg font-semibold text-gray-900 mb-3">自我评价 *</label>
            <textarea 
              v-model="applicationForm.evaluation"
              rows="3"
              placeholder="请简要评价自己的优势和特点"
              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none resize-none"
              required
            ></textarea>
          </div>
          
          <div class="text-center pt-6">
            <button 
              type="submit"
              :disabled="isSubmitting"
              class="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-12 py-4 rounded-2xl text-xl font-semibold transition-all transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
            >
              <el-icon v-if="isSubmitting" class="animate-spin mr-2"><Loading /></el-icon>
              {{ isSubmitting ? '提交中...' : '提交申请' }}
            </button>
          </div>
        </form>
      </div>

      <!-- 联系我们 -->
      <div class="text-center">
        <h3 class="text-3xl font-bold text-gray-900 mb-6">还有疑问？</h3>
        <p class="text-gray-600 mb-8">欢迎通过以下方式联系我们</p>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
          <div class="bg-white rounded-2xl p-6 shadow-lg border border-gray-200">
            <div class="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
              <el-icon class="text-blue-600 text-2xl"><Phone /></el-icon>
            </div>
            <h4 class="font-semibold text-gray-900 mb-2">电话咨询</h4>
            <p class="text-blue-600">400-123-4567</p>
          </div>
          <div class="bg-white rounded-2xl p-6 shadow-lg border border-gray-200">
            <div class="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
              <el-icon class="text-green-600 text-2xl"><Message /></el-icon>
            </div>
            <h4 class="font-semibold text-gray-900 mb-2">邮箱咨询</h4>
            <p class="text-green-600">hr@edulivelink.com</p>
          </div>
          <div class="bg-white rounded-2xl p-6 shadow-lg border border-gray-200">
            <div class="w-16 h-16 bg-purple-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
              <el-icon class="text-purple-600 text-2xl"><ChatDotRound /></el-icon>
            </div>
            <h4 class="font-semibold text-gray-900 mb-2">在线咨询</h4>
            <p class="text-purple-600">工作日 9:00-18:00</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Monitor, User, TrendCharts, Star, Document, ChatDotRound, VideoPlay, Phone, Message, Loading } from '@element-plus/icons-vue'

const isSubmitting = ref(false)

const applicationForm = reactive({
  name: '',
  phone: '',
  email: '',
  position: '',
  experience: '',
  teaching: '',
  evaluation: ''
})

const submitApplication = async () => {
  if (!applicationForm.name || !applicationForm.phone || !applicationForm.email || !applicationForm.position || !applicationForm.experience || !applicationForm.evaluation) {
    ElMessage.warning('请填写必填项')
    return
  }
  
  try {
    isSubmitting.value = true
    
    // 模拟提交过程
    await new Promise(resolve => setTimeout(resolve, 2000))
    
    // 显示成功消息
    ElMessage.success('申请提交成功！我们会尽快审核您的申请并与您联系。')
    
    // 重置表单
    applicationForm.name = ''
    applicationForm.phone = ''
    applicationForm.email = ''
    applicationForm.position = ''
    applicationForm.experience = ''
    applicationForm.teaching = ''
    applicationForm.evaluation = ''
    
  } catch (error) {
    ElMessage.error('提交失败，请稍后重试')
  } finally {
    isSubmitting.value = false
  }
}
</script>

<style scoped>
@keyframes blob {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob { animation: blob 7s infinite; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }
</style>
